<template>
  <div>
    <h2 style="text-align: center">我的预约信息</h2>
    <el-input
      v-model="input"
      placeholder="请输入您要查询的信息"
      size="large"
      type="text"
      style="width: 60vh; margin-left: 50vh; margin-bottom: 10px"
    />
    <el-row style="height: 5vh,">
      <!-- <el-col :span="3" 
        ><el-button type="primary">
          <el-icon style="vertical-align: middle">
            <el-icon><Search /></el-icon>
          </el-icon>
          <span style="vertical-align: middle">搜索</span>
        </el-button></el-col
      > -->
      <!-- <el-col :span="3">
        <el-button type="primary">
          <el-icon style="vertical-align: middle">
            <Edit />
          </el-icon>
          <span style="vertical-align: middle"> 修改 </span>
        </el-button>
        </el-col> -->
      <el-col :span="3" style="margin-left: 480px"
        ><el-button type="primary" plain @click="refresh">
          <el-icon style="vertical-align: middle">
            <el-icon><Loading /></el-icon>
          </el-icon>
          <span style="vertical-align: middle">刷新</span>
        </el-button></el-col
      >
      <el-col :span="3" style="margin-left: 100px"
        ><el-button type="primary" plain>
          <el-icon style="vertical-align: middle" >
            <el-icon><Delete /></el-icon>
          </el-icon>
          <span style="vertical-align: middle">删除</span>
        </el-button></el-col
      >
    </el-row>
    <el-table :data="tableData" style="width: 100%"  v-loading="loading">
      <el-table-column
        :prop="index"
        :label="item"
        v-for="(item, index) in tableHeader"
        :key="index"
      >
      </el-table-column>
    </el-table>
  </div>

  <el-row></el-row>
</template>
  <script>
  import { ref } from 'vue'
const loading = ref(true)
  import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  name: "Userbiology",
  data() {
    return {
      tableHeader: {
        id:"编号",
        name: "实验室名称",
          url: "实验室图片",
          time: "预约时间",
          device: "实验室设备",
          number: "预约实验室数量",
      },
      tableData: [
      ],
    };
  },
  methods:{
    //刷新
    refresh() {
      axios.post("http://localhost:8081/laboratory/list", {}).then((res) => {
        if (res.status === 200 && loading) {
          this.tableData = res.data;
          ElMessage({
            message: "刷新成功" ,
            type: "success",
          });
        }
      });
    },
    //
    getTabelInfo() {
      // let _that = this;
      axios
        .post("http://localhost:8081/laboratory/list", {
          name: this.name,
          pic: this.url,
          time: this.time,
          device: this.device,
          number: this.number,
        })
        .then((response) => {
          this.tableData = response.data;
          console.log(response.data); //请求正确时执行的代码
          //     console.log(_that.tableData)//先打印一下空数组
          //     _that.tableData=response.data//将后台传递的数组赋值给定义的空数组
          //     console.log(_that.tableData)//检查一下数组内是否有数据
          // }).catch(function(response){
          //     console.log(response);//发生错误时执行的代码
        });
    }, 
  },
  mounted() {
    this.getTabelInfo();
  },
};
</script>
